<div class="dataTables_wrapper">
  <perfect-scrollbar>
    <table class="table dataTable table-hover advanced-table" [class.center]="center">
      <thead>
        <tr class="data-table-header">
          <th class="g-table-checkbox" *ngIf="selection">
            <mat-checkbox
              *ngIf="selection.multiple"
              [ngModel]="markSelected || (selectedAll$ | async)"
              (ngModelChange)="selectAll($event)"
              [disabled]="markSelected"
            ></mat-checkbox>
          </th>
          <th>
            <span>#</span>
          </th>
          <ng-container *ngFor="let column of columns">
            <th *ngIf="!column.hidden" [style.width]="column.width">
              <span> {{ column.header || column.name }} </span>
            </th>
          </ng-container>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngIf="result$ | async as result">
          <tr class="data-table-row" *ngFor="let row of result?.list; let index = index">
            <td *ngIf="selection">
              <mat-checkbox
                [ngModel]="markSelected || selection.isSelected(row)"
                (ngModelChange)="selection.trigger(row)"
                [disabled]="markSelected"
              ></mat-checkbox>
            </td>
            <td>{{ (result.page - 1) * result.pageSize + index + 1 }}</td>
            <ng-container *ngFor="let column of columns">
              <ng-container *ngIf="!column.hidden">
                <ng-container
                  *ngTemplateOutlet="column.template; context: row | assign: { $implicit: row }"
                >
                </ng-container>
              </ng-container>
            </ng-container>
          </tr>
        </ng-container>
      </tbody>
    </table>
  </perfect-scrollbar>
  <m-pagination
    *ngIf="result$ | async as result"
    [useRouteQuery]="false"
    [length]="result.total"
    [page]="result.page"
    [pageSize]="result.pageSize"
    (pageChange)="pageChange($event)"
  >
    <ng-content></ng-content>
  </m-pagination>
</div>
<ng-container *ngIf="search$ | async"></ng-container>
